import React, { Component } from 'react';
import Banner from '../../components/Banner'
import { NavBar, ImageViewer } from 'antd-mobile'
import { Map, Marker } from 'react-bmapgl'
class Index extends Component {
  state = {
    visible: false
  }
  render() {
    const { location, history } = this.props
    const { visible } = this.state
    const { state: { banners, title, desc, pos } } = location
    return (
      <div>
        {/* 头部 */}
        <NavBar backArrow onBack={ () => history.goBack() }>{title}</NavBar>
        {/* 轮播 */}
        <Banner banners={banners} onClick={ () => this.setState({ visible: true }) }></Banner>
        <p>{desc}</p>
        <h2>位置</h2>
        {/**
         * 1. 进入百度地图官网，申请账号， 申请AK 秘钥
         * 2. 找到开发者文档
         *  2-1 方式一：
         *      在public文件中找到index.html 引入对应百度地图api js
         *      在相应周期函数调用对应api
         *  2-2 方式二
         *      在public文件中找到index.html 引入对应百度地图api js
         *      使用 react-bmapgl 库
        */}
        <Map center={ pos } style={{ height: 200 }} zoom={ 12 }>
          <Marker
            position={new window.BMapGL.Point(pos.lng, pos.lat)}
            enableDragging
          />
        </Map>
        {/* 图片查看 */}
        <ImageViewer.Multi images={banners} visible={ visible } maxZoom={10}
          onClose={ () =>  this.setState({ visible: false }) }
        ></ImageViewer.Multi>
      </div>
    );
  }
}

export default Index;
